<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册表</title>
    <style>
        #div1 {
            width:100px;
            height:30px;
            border:1px solid black;
            text-align:center;
            line-height:30px;
            font-size:20px;
        }
    </style>
    <script src="./js/tool.js">/*获取验证码*/</script>
    <script>
        /*
           事件驱动函数
           document.getElementById(id);
        */
        function btnClick() {
            var DIV = document.getElementById('div1');
            var CG = document.getElementById('cg');

            //alert(DIV.innerHTML);
            //DIV.innerHTML = '赋值操作';
            DIV.innerHTML = testCode(6);

        }
        function btClick() {
            var DIV = document.getElementById('div1');
            var CG = document.getElementById('cg');

            if (DIV.innerHTML == CG.value) {
                alert('注册成功');
            }else{
                alert('验证码错误请重新注册')
            }
        }
    </script>
</head>
<body>
<form action="" method="get" >
    <table align="center" border="1px solid black" style="background-color: #3afffd">
        <tr>
            <td>账号:</td>
            <td>
                <input type="text" name="username" required>
            </td>
        </tr>
        <tr>
            <td>密码:</td>
             <td>
                <input type="password" name="password" required>
             </td>
        </tr>
        <tr>
            <td>邮箱:</td>
            <td>
                 <input type="email" name="emails" required>
            </td>
        </tr>
        <tr>
            <td>年龄:</td>
             <td>
                <input type="number" name="ages" required>
             </td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" value="男">男
                <input type="radio" name="sex" value="女">女
            </td>
        </tr>
        <tr>
            <td>爱好:</td>
            <td>
                <input type="checkbox" name="hobby" checked value="sing">唱
                <input type="checkbox" name="hobby" value="jump">跳
                <input type="checkbox" name="hobby" value="rap">rap
                <input type="checkbox" name="hobby" value="Basketball">篮球
            </td>
        </tr>
        <tr>
            <td>头像:</td>
            <td>
                <input type="file">
            </td>

        </tr>
        <tr align="center">
            <td>验证码:</td>
            <td>
                <button onclick="btnClick();" style="border: 1px solid #3afffd;background-color: #3afffd"><div id="div1">获取验证码</div></button>


                <p><label for="cg"/><input type="text" id="cg"></p>
            </td>

        </tr>
        <tr align="center">
            <td colspan="2">
                <button onclick="btClick();" style="border: 1px solid #3afffd;background-color: #3afffd"><input type="submit" value="注册"></button>

            </td>
        </tr>
    </table>
</form>
</body>
</html>